<template>
	<view class="nav-tap">
		<view class="nav-tap-wrap">
			<view class="taps-wrap">
				<view :class="tapindex==index?'taps-wrap-sub2':'taps-wrap-sub'" v-for="(item,index) in tapsData" @click="clickTapItem(item,index)">
					<text>{{item.value}}</text>
					<text v-if="item.num!=0" class="tips-num">{{item.num}}</text>
				</view>
			</view>
			<view class="select-wrap">
					<view class="group-wrap">
							<jPicker :disabled="false" class="picker-view" @sure="seclecWorkGroup($event,'TYPE')" showKey="label" valKey="label" clickValue='班组' :options="workGroupeOptions">	</jPicker>
					</view>
				<!-- <picker :value="value" @change="seclecWorkGroup" class="picker-view" :range="workGroupeOptions" range-key="label">
					<view class="select-group-wrap">
						<view class="group-title">{{workValue}}</view>
						<span class="iconfont icon-paixujiantouxia iconJiantou"></span>
					</view>
				</picker> -->
				<picker :value="periodIndex" @change="selecAttedance" class="picker-view" :range="attedanceOptions" range-key="yearmth">
					<view class=" kaoqin">
						<view class="group-title">{{periodValue}}</view>
						<span class="iconfont icon-paixujiantouxia iconJiantou"></span>
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	import jPicker from '../j-picker/j-picker.vue'
	export default {
		name:"nav-tab",
		data() {
			return {
				tapindex:this.defaultIndex,
				workValue:'班组',
				value:'',
			};
		},
		components:{
			jPicker
		},
		props:{
			tapsData:{
				type:Array,
				default:()=>[{value:'未审核'},{value:'已审核'}]
			},
			workGroupeOptions:{
				type:Array,
			},
			attedanceOptions:{
				type:Array,
			},
			defaultIndex:{
				default:0
			},
			periodValue:{
				default:'考勤'
			},
			periodIndex:''
		},
		methods:{
			bindPickerChange(){
				
			},
			clickTapItem(item,index){
				this.tapindex = index
				let obj = {
					item:item,
					index:index
				}
				this.$emit('tapChange',obj)
			},
			selecAttedance(value){
				let propValue = this.attedanceOptions[value.detail.value]
				// this.periodValue = propValue.yearmth
				this.$emit('attedanceChange',propValue)
			},//传出考勤的value与事假
			seclecWorkGroup(value){
				let propValue = value.value
				this.workValue = value.label
				this.$emit('workChange',propValue)
			},//传出班组的value与事假
		},
	}
</script>

<style lang="scss">
	.group-title{
		transform: scale(0.9);
	}
	.tips-num{
		position: absolute;
		text-align: center;
		line-height: 38rpx;
		color: #FFFFFF;
		top: 8rpx;
		font-size: 24rpx;
		width: 30rpx;
		height: 38rpx;
		border-radius: 40%;
		background: red;
	}
	.picker-view{
	}
	.nav-tap{
		width: 100%;
		height: 90rpx;
		position: fixed;
		top: 0;
		background: #ffffff;
		border-bottom: 2rpx solid #dedede;
		.nav-tap-wrap{
			display: flex;
			justify-content: space-between;
			height: 100%;
			align-items: center;
			padding: 0 36rpx;
			.taps-wrap{
				display: flex;
				align-items: center;
				.taps-wrap-sub{
					width: 150rpx;
					font-size: 28rpx;
					color: #757575;
				}
				.taps-wrap-sub2{
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: #0089FF;
				}
			}
			.select-wrap{
				display: flex;
				justify-content: space-between;
				height: 100%;
				align-items: center;
				.select-group-wrap{
					display: flex;
					align-items: center;
					height: 60rpx;
					padding-left: 10rpx;
					font-size: 24rpx;
					background: #0089FF;
					color: #ffffff;
					border-radius: 6rpx;
					
				}
				.select-group-wrap2{
					max-height: 60rpx;
					display: flex;
					align-items: center;
					padding: 10rpx 10rpx;
					padding-left: 20rpx;
					font-size: 24rpx;
					background: #d9d9d9;
					color: #434343;
					margin-left: 20rpx;
					border-radius: 6rpx;
				}
			}
		}
	}
	.kaoqin{
		width: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
		background: #0089FF;
		color: #ffffff;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
	.iconJiantou{
		font-size: 24rpx;
	}
</style>
